<template>
  <div>
    <ul>
      <li
        v-for="(item, i) in routerList"
        :key="item.path"
        @click="changcolor(i)"
      >
        <router-link :to="item.path" :class="{ active: index == i }" tag="span">
          <i :class="item.icon"></i>{{ item.text }}</router-link
        >
      </li>
    </ul>
    <div class="footer">
      <div> <span><img src="../assets/img/doctor.png" alt=""></span>
      <span class="spanstyle">张医生</span></div>
      <div class="matop"> <span class="lefts"><i class="el-icon-switch-button"></i></span>
      <span class="paleft" @click="esc">退出登录</span></div>
     
    </div>
  </div>
</template>

<script>
export default {
  name: "navbar",
  data() {
    return {
      index: 0,
      routerList: [
        {
          path: "/index/bingrenlist",
          text: "我的病人",
          icon: "el-icon-document-add",
        },
        {
          path: "/index/binglliindex/binglilist",
          text: "电子病历",
          icon: "el-icon-tickets",
        },
        {
          path: "/index/zhuyuanguanliIndex/guanlilist",
          text: "住院管理",
          icon: "el-icon-bank-card",
        },
        {
          path: "/index/baogaoIndex/baogaoquery",
          text: "报告查询",
          icon: "el-icon-mouse",
        },
        {
          path: "/index/outindex/outlist",
          text: "出院管理",
          icon: "el-icon-office-building",
        },
        {
          path: "/index/chufang",
          text: "处方管理",
          icon: "el-icon-wallet",
        },
        {
          path: "/index/jiuzhenzhixun",
          text: "就诊质讯",
          icon: "el-icon-question",
        },
        {
          path: "/index/Myapp",
          text: "个人信息",
          icon: "el-icon-s-custom",
        },
      ],
    };
  },
   created() {
    let path = this.$route.path;

    switch (path) {
      case "/index/bingrenlist":
        this.index = 0;
        break;
      case "/index/binglliindex/bingliadd"://添加病例
        this.index = 1;
        break;
      case "/index/binglliindex/binglilist"://病例list
        this.index = 1;
        break;
      case "/index/binglliindex/bingliseenedit"://病例查看修改
        this.index = 1;
        break;
      case "/index/zhuyuanguanliIndex/guanlilist": //住院管理
        this.index = 2;
        break;
      case "/index/zhuyuanguanliIndex/addGuanlibingren"://添加住院病人
        this.index = 2;
        break;
      case "/index/baogaoIndex/baogaoquery": //报告查询
        this.index = 3;
        break;
      case "/index/baogaoIndex/addbaogao"://添加住院病人
        this.index = 3;
        break;
      case "/index/baogaoIndex/baogaodit"://添加住院病人
        this.index = 3;
        break;
      case "/index/outindex/outlist"://出院管理
        this.index = 4;
        break;
      case "/index/outindex/outdayin"://出院管理打印
        this.index = 4;
        break;
      case "/index/chufang"://处方管理
        this.index = 5;
        break;
      case "/index/jiuzhenzhixun"://就诊质讯
        this.index = 6;
        break;
      case "/index/Myapp"://个人中心
        this.index = 7;
        break;

      default:
        this.index = 8;
        break;
    }
  },
   methods: {
     //退出登录
     esc(){
      this.$axios
            .post("/shiro/logout")
            .then( (response) =>{ //
               console.log(response)
               if(response.suc){
                     this.$router.push({path:'/login'}) //跳到登录
               }
               
            })
            .catch( (error)=> {
              console.log(error);
            });
     },
    changcolor(i) {
      console.log(i);
      this.index = i;
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  color: #16dcb8;
}
 ul {
      padding: 40px 0;
      border-top: 3px solid #16dcb8;
    }
    i {
      margin-right: 20px;
    }
    li {
      margin: 20px auto;
      span{
        cursor: pointer;
      }
    }
.footer{
  margin-top: 80px;
  padding-top: 20px;
  border-top: 1px solid black;
  .spanstyle{
    vertical-align: super !important;
    padding-left: 20px;
  }
  .matop{
    margin-top: 10px;
  }
  .paleft{
    padding-left: 10px;
    cursor: pointer;
  }
  .lefts{
    padding-left: 26px;
  }
}
    
</style>